<style lang="less" scoped>
@import "./comments.less";
</style>
<template>
  <div class="page container reply">
    <v-menu
      class="reply-tabs"
      :selected-key="activedTabKey"
      :data-source="[
        { path: '/comments', name: '未读回复' },
        { path: '/comments?a', name: '全部回复' },
        { path: '/comments?b', name: '评论回复' },
        { path: '/comments?c', name: '帖子回复' },
      ]"
    />
    <!-- <v-tabs
      class="reply-tabs"
      default-active-key="1"
      :data-source="[
        { key: '1', name: '未读回复' },
        { key: '2', name: '全部回复' },
        { key: '3', name: '评论回复' },
        { key: '4', name: '帖子回复' }
      ]"
      @change="tabsChange"
    /> -->
    <div class="reply-list">
      <v-comment-list :data-source="commentData" :base="base" />
      <!-- pagination -->
      <a-pagination
        v-model="current"
        show-less-items
        size="small"
        :total="500"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CommentList from '~/components/comment/comment-list'
import Menu from '~/components/menu'
export default {
  components: {
    'v-menu': Menu,
    'v-comment-list': CommentList
  },

  data () {
    return {
      current: 1,
      commentData: [
        {
          like: 12,
          head: '',
          name: 'pwk',
          createDate: '2020/04/15 19:37:01',
          content: '看了两集非常棒！作者大大走心了哈哈~~',
          noname: false,
          reply: false,
          fold: false,
          replyList: [
            {
              like: 12,
              head: '',
              name: 'pwk',
              createDate: '2020/04/15 19:37:01',
              content: '看了两集非常棒！作者大大走心了哈哈~~',
              noname: false,
              reply: false,
              fold: false,
              replyList: [
                {
                  like: 12,
                  head: '',
                  name: 'pwk',
                  createDate: '2020/04/15 19:37:01',
                  content: '看了两集非常棒！作者大大走心了哈哈~~',
                  noname: false,
                  reply: false,
                  fold: false,
                },
                {
                  like: 12,
                  head: '',
                  name: 'pwk',
                  createDate: '2020/04/15 19:37:01',
                  content: '看了两集非常棒！作者大大走心了哈哈~~',
                  noname: false,
                  reply: false,
                  fold: false,
                }
              ]
            }
          ]
        },
        {
          like: 12,
          head: '',
          name: 'pwk',
          createDate: '2020/04/15 19:37:01',
          content: '看了两集非常棒！作者大大走心了哈哈~~',
          noname: false,
          reply: false,
          fold: false,
          replyList: [
            {
              like: 12,
              head: '',
              name: 'pwk',
              createDate: '2020/04/15 19:37:01',
              content: '看了两集非常棒！作者大大走心了哈哈~~',
              noname: false
            }
          ]
        }
      ],
      base: Object.freeze({
        like: 12,
        head: '',
        name: 'pwk',
        createDate: '2020/04/15 19:37:01',
        content: '看了两集非常棒！作者大大走心了哈哈~~',
        noname: false,
        reply: false,
        fold: false,
        replyList: []
      })
    }
  },
  computed: {
    ...mapState({

      activedTabKey () {
        return this.$route.fullPath
      },
    }),
  },
  created () {
  },
  methods: {
    previewFn (content) {
      this.commentData.unshift({
        ...this.base,
        content
      })
    },
    likedfn () {
      this.number++
      this.liked = true
    },
    onClickPopMenu (data) {
      console.log(data)
    },
    tabsChange (key) {
      console.log(key)
    }
  }
}
</script>
